<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" th:href="@{lib/bootstrap/css/bootstrap.min.css}"/>
</head>
<style>
    #pic{
        width:100px;
        height:100px;
        border: 1px solid #000000;
        border-radius:50% ;
        margin:20px auto;
        cursor: pointer;
    }
     /**
     * 注册提示框样式
     */
    #info{
        display: none;
        width: 200px;
        height: 200px;
        background-color: #000000;
        opacity:0.7;
        border-radius: 30px;
        margin: 150px auto;
        color: white;
        position:absolute;
        top:20%;
        left:30%;
        z-index: 10000;
    }
    #info p{
        text-align: center;
        font-size: 18px;
        padding: 10px;
    }

</style>
<script>

</script>
<body>
<div class="container-fluid">
    <div class="row">
        <p style="text-align: center;color: #009688;">您可以修改您的个人信息,但记得点击保存</p>
        <div class="col-sm-3"></div>
        <div class="col-sm-6">
            <input hidden="hidden" value="1" id="uid" th:value="${session.nowUser.uid}">
            <input hidden="hidden" value="2" id="password" th:value="${session.nowUser.password}">
            <div class="input-group">
                <span class="input-group-addon" id="basic-addon1" >用&nbsp;&nbsp;户&nbsp;&nbsp;名</span>
                <input type="text" class="form-control" id="username" aria-describedby="basic-addon1" th:value="${session.nowUser.username}" readonly="readonly">
            </div>
            <p>&nbsp;</p>
            <div class="input-group">
                <span class="input-group-addon" id="basic-addon8">头像照片</span>
                <div class="col-sm-3">
                    <img id="pic" src="images/avatar.png" th:src="@{img/{avatar}(avatar=${session.nowUser.picture})}">
                    <input id="upload" name="file" accept="images/*" type="file" style="display: none"  aria-describedby="basic-addon7" />
                    <input type="hidden" id="fileName" value="default.jpg" />
                </div>
                <div class="col-sm-7" >
                    <p style="font-size: 18px;margin-top: 40px;">点击左侧空心圆实现上传<Strong style="color: green;">(若不填则会选择系统默认)</Strong>，若是更换其他再次点击即可,若取消当前上传请点击
                        <em onclick="stopUpload()" style="color: red;">取消</em></p>
                </div>
            </div>
            <p>&nbsp;</p>
            <div class="input-group" id="sexChange">
                <span class="input-group-addon" id="basic-addon3">&nbsp;&nbsp;性&nbsp;&nbsp;&nbsp;&nbsp;别&nbsp;&nbsp;</span>
                <select type="text" class="form-control" id="sex" aria-describedby="basic-addon3" th:value="${session.nowUser.sex}">
                    <option value="男">男</option>
                    <option value="女">女</option>
                </select>
            </div>
            <p>&nbsp;</p>
            <div class="input-group">
                <span class="input-group-addon" id="basic-addon4">手&nbsp;&nbsp;机&nbsp;&nbsp;号</span>
                <input type="text" class="form-control" id="mobile" th:value="${session.nowUser.mobile}" aria-describedby="basic-addon4" readonly="readonly">
            </div>
            <p>&nbsp;</p>
            <div class="input-group">
                <span class="input-group-addon" id="basic-addon5">&nbsp;&nbsp;昵&nbsp;&nbsp;&nbsp;&nbsp;称&nbsp;&nbsp;</span>
                <input type="text" class="form-control" id="nickname" aria-describedby="basic-addon5" th:value="${session.nowUser.nickname}">
            </div>
            <p>&nbsp;</p>
            <div class="input-group" id="levelChange">
                <span class="input-group-addon" id="basic-addon6">&nbsp;&nbsp;级&nbsp;&nbsp;&nbsp;&nbsp;别&nbsp;&nbsp;</span>
                <input  th:if="${session.nowUser.level=='user'}" th:value="普通用户" type="text" class="form-control" id="level" aria-describedby="basic-addon6"  readonly="readonly"/>
                <input  th:if="${session.nowUser.level=='member'}" th:value="大会员" type="text" class="form-control" id="level2" aria-describedby="basic-addon6"  readonly="readonly"/>
            </div>
            <p>&nbsp;</p>
            <div class="input-group">
                <span class="input-group-addon" id="basic-addon7">创建时间</span>
                <input type="text" class="form-control" id="createTime" aria-describedby="basic-addon7" th:value="${session.nowUser.createTime}" readonly="readonly">
            </div>

            <p>&nbsp;</p>
            <div class="input-group">
                <button class="btn btn-primary" id="saveInfo" style="margin-left: 240px;">保存信息</button>
            </div>
        </div>
        <div class="col-sm-3"></div>

    </div>
</div>
<p>&nbsp;</p>
<!--提示框-->
<div id="info">
    <span id="msg"></span>
</div>

</body>
<script type="text/javascript" th:src="@{js/jquery.min.js}"></script>
<script type="text/javascript" th:src="@{lib/bootstrap/js/bootstrap.min.js}"></script>
<script>
    $(function(){

    });
    var urlList = new Array();

    function pUrl(id,url){
        this.id = id;
        this.url = url;
    }

    $("#pic").click(function () {
        $("#upload").click(); //隐藏了input:file样式后，点击头像就可以本地上传
        $("#upload").on("change",function(){
            var formData = new FormData();
            formData.append('file', $('#upload')[0].files[0]);
            formData.append("selectId", $("#uid").val());
            console.log(formData);
            $.ajax({
                url: "/upload",
                type: "POST",
                data: formData,
                /**
                 *必须false才会自动加上正确的Content-Type
                 */
                contentType: false,
                /**
                 * 必须false才会避开jQuery对 formdata 的默认处理
                 * XMLHttpRequest会对 formdata 进行正确的处理
                 */
                processData: false,
                success: function (data) {
                    $("#fileName").val(data);
                },
                error: function () {
                    alert("上传失败！");

                }
            });
            var objUrl = getObjectURL(this.files[0]) ; //获取图片的路径，该路径不是图片在本地的路径
            if (objUrl) {
                $("#pic").attr("src", objUrl) ; //将图片路径存入src中，显示出图片
                urlList.push(new pUrl($("#uid").val(),objUrl));
            }
        });
    });

    function stopUpload(){
        $("#pic").attr("src","images/avatar.png");
        $("#fileName").val("default.jpg");
    }
    //建立一個可存取到該file的url
    function getObjectURL(file) {
        var url = null ;
        if (window.createObjectURL!=undefined) { // basic
            url = window.createObjectURL(file) ;
        } else if (window.URL!=undefined) { // mozilla(firefox)
            url = window.URL.createObjectURL(file) ;
        } else if (window.webkitURL!=undefined) { // webkit or chrome
            url = window.webkitURL.createObjectURL(file) ;
        }
        return url ;
    }
    $("#saveInfo").click(function(){
        $.post("/updateUserByMember",{"uid":$("#uid").val(),
            /*    "username":$("#username").val(),
                "password":$("#password").val(),
                "mobile":$("#mobile").val(),*/
                "sex":$("#sex").val(),
                "picture":$("#fileName").val(),
                "nickname":$("#nickname").val()},
            function(data){
                console.log(data);
                var src = urlList[urlList.length-1].url;
                $("#sex").val(data.sex);
                $("#nickname").val(data.nickname);
                $("#fileName").val(data.picture);
                $("#parentPicture1",parent.document).attr("src",src);
                $("#parentPicture2",parent.document).attr("src",src);
                $("#parentNick1",parent.document).text(data.nickname);
                $("#parentNick2",parent.document).text(data.nickname);
                $("#info").css("display","block");
                $("#msg").html("<p>&nbsp;</p>" +
                    "<p style='font-size: 40px;'>成功</p>");
                window.setTimeout(function(){
                    $("#info").css("display","none");
                },2500);
            });
    });
</script>
</html>